<template>
	<BaseContainer style="top: 0">
		<aplid-base-crud ref="crud" class="w-100" v-bind="baseConfig" :saveFormate="saveFormate" :onLoadFormate="onLoadFormate" :operateFormate="operateFormate">
			<template v-slot:spotNumForm="{ model }">
				<el-input v-model="model.spotNum">
					<template #append>{{ model.spotType == 1 ? '个' : '%' }}</template>
				</el-input>
			</template>
			<template v-slot:spotAreaNameForm="{ model }">
				<AplidAreaSelect
					v-if="model.spotAreaType != 5"
					:key="model.spotAreaType"
					:multiple="true"
					:checkStrictly="false"
					:show-all-levels="false"
          propName="spotAreaName"
					:regionGrade="model.spotAreaType + 1"
					v-model="model.spotAreaArrIds"
					v-model:model-name="model.spotAreaName"
				></AplidAreaSelect>
				<div v-else>
					<el-button text type="primary" @click="visible = !visible">选择</el-button>
					<div class="flex gap-2 flex-wrap">
						<el-tag v-for="(tag, index) in dataList" :key="tag.label" closable @close="handleClose(index)">
							{{ tag.label }}
						</el-tag>
					</div>
				</div>
			</template>
		</aplid-base-crud>

		<el-drawer v-model="visible" append-to-body title="选择抽查对象" size="65%" :close-on-click-modal="false" :with-header="false">
			<SelectSpotPage @change="onSelected" :dataList="dataList"></SelectSpotPage>
		</el-drawer>
	</BaseContainer>
</template>

<script setup>
import { baseConfig } from './config'
import AplidAreaSelect from '@/components/AplidCrud/src/AplidAreaSelect'
import SelectSpotPage from './SelectSpotPage/index.vue'

const visible = ref(false)

const dataList = ref([])
const onSelected = (data) => {
	dataList.value = data
	visible.value = false
}

const handleClose = (index) => {
	dataList.value.splice(index, 1)
}

const operateFormate = (row,type)=> {
  return new Promise((resolve, reject) => {
    dataList.value = row.spotAreaJson||[]
    resolve(row)
  })
}
const onLoadFormate = (arr) => {
	return new Promise((resolve, reject) => {
		resolve(
			arr.map((item) => {
				if (item.spotAreaJson) {
					item.spotAreaJson = JSON.parse(item.spotAreaJson) ||{}
          item.spotAreaName = item.spotAreaJson.name
          item.spotAreaArrIds = item.spotAreaJson.ids
				}
				if (item.spotAreaType == 5) {
          item.spotAreaName = item.spotAreaJson.map(item=>item.label).join('/')
				}
				return {
					...item,
				}
			})
		)
	})
}
const saveFormate = (form) => {
	return new Promise((resolve, reject) => {
		if (form.spotAreaType == 5) {
			form.spotAreaJson = dataList.value
			form.spotAreaIds = dataList.value.map((item) => item.value).toString()
		} else if (Array.isArray(form.spotAreaArrIds)) {
			form.spotAreaIds = form.spotAreaArrIds.map((item) => item[item.length - 1]).toString()
      form.spotAreaJson = {
        name:form.spotAreaName,
        ids:form.spotAreaArrIds
      }
		}else {
      form.spotAreaIds = ''
    }
		resolve({
			...form,
			spotAreaJson: form.spotAreaJson ? JSON.stringify(form.spotAreaJson) : '{}',
		})
	})
}
</script>

<style lang="scss" scoped></style>
